import { Col, Form, Radio, Row } from 'antd';
import { capitalize } from 'lodash-es';
import React from 'react';

import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import { SHAPE_TYPES } from './constants';
import styles from './index.module.less';

interface Props {
  data: LayerInfoFE;
  onChange: (values: Partial<LayerInfoFE>) => void;
}

const ShapeConfigs = ({ data, onChange }: Props): JSX.Element => {
  return (
    <Row gutter={[24, 12]}>
      <Col span={24}>
        <Form.Item name="type" className={styles.container}>
          <Radio.Group optionType="button" size="middle">
            {SHAPE_TYPES.map(({ key, value }) => (
              <Radio.Button key={key} value={value}>
                {capitalize(key)}
              </Radio.Button>
            ))}
          </Radio.Group>
        </Form.Item>
      </Col>
    </Row>
  );
};

export default ShapeConfigs;
